import Vue from 'vue'
import Vuex from 'vuex'
import axios from "axios"

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    // 列表数据
    list:[],
    // 输入框数据
    inpVal:"aaa",
    // 下一个 ID
    nextId:5,
    // 默认展示菜单项
    viewItem: "all"
  },
  mutations: {
    // 为 state 中的 list 赋值
    initList(state, list){
      state.list = list
    },
    // 为 state 中的 inpVal 赋值
    initInpVal(state, val) {
      state.inpVal = val
    },
    // 添加列表元素
    addItem(state, item){
      let obj = {
        id:state.nextId,
        info:item,
        done:false
      }
      state.list.push(obj)
      state.nextId++;
      state.inpVal = ""
    },
    // 根据 ID 删除 item 项
    delItem(state, id){
      // 根据 ID 查找列表中的列表项
      let i = state.list.findIndex(x => x.id === id)
      // 根据索引 删除对应的元素
      if(i !== -1){
        state.list.splice(i,1)
      }
    },
    // 更改复选框 布尔值
    changeStatus(state, e){
      // 根据 ID 查找列表项
      let i = state.list.findIndex(x => x.id === e.id);
      // 根据索引 修改对应的元素
      if(i !== -1){
        state.list[i].done = e.status
      }
    },
    // 清除 已完成的列表项
    delDone(state){
      state.list = state.list.filter(x => x.done === false)
    },
    // 更改导菜单项
    changeNav(state, e){
      state.viewItem = e
    }
  },
  actions: {
    getList(ctx){
      axios.get("/list.json").then(({data}) => {
        console.log(data)
        ctx.commit("initList",data)
      })
    },
  },
  getters: {
    // 统计未完成的人数
    unDoneLength(state){
      return state.list.filter(x => x.done === false).length
    },
    infoList(state){
      if(state.viewItem === "all"){
        return state.list
      }
      if(state.viewItem === "undone"){
        return state.list.filter(x => !x.done)
      }
      if(state.viewItem === "done"){
        return state.list.filter(x => x.done)
      }
      return state.list
    }
  },
  modules: {
  }
})
